<!--
 * @Description: 岗位补贴明细弹窗
 * @Author: liyujie
 * @Date: 2021/05/10
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/05/10
-->
<template>
    <section class="wrapper">
        <el-dialog
            title="查看"
            :visible.sync="dialogVisible"
            width="680px"
            :close-on-click-modal="false"
        >
            <div class="dialog-content">
                <div class="header">
                    <div class="title">
                        平台{{ filterData.type === 1 ? '优惠券' : '红包' }}补贴金额明细
                    </div>
                    <div class="time">
                        <span v-if="filterData.day">
                            统计时间：{{ String(filterData.day).slice(0,4) }}-{{ String(filterData.day).slice(4,6) }}-{{ String(filterData.day).slice(6) }}
                        </span>
                        <span v-else>
                            {{ filterData.start_time ? '统计时间' : '统计截止时间' }}：
                            <span v-if="filterData.start_time">
                                {{ filterData.start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }} -
                                {{ filterData.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                            </span>
                            <span v-else>
                                {{ filterData.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                            </span>
                        </span>
                    </div>
                </div>
                <div class="subsidy-money">
                    <div>设置平台{{ filterData.type === 1 ? '优惠券' : '红包' }}补贴预算：<span style="color: #2FBDB3">￥{{ statistics_data.total_money }}</span></div>
                    <div>平台{{ filterData.type === 1 ? '优惠券' : '红包' }}已补贴支出：<span style="color: #F79038">￥{{ statistics_data.total_used_money }}</span></div>
                </div>
                <el-table
                    :data="tableData"
                    ref="table"
                    :cell-style="{height: '46px'}"
                >
                    <el-table-column width="40"/>
                    <el-table-column
                        prop="phaadmin_position_name"
                        label="岗位名称"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="used_money"
                        label="平台已补贴金额(元)"
                        align="center"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="money"
                        label="岗位预算上限(元)"
                        align="center"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.is_enabled === 0 ? '未设置' : scope.row.money }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    name: "PositionSubsidyDetailDialog",
    data() {
        return {
            dialogVisible: false,
            filterData: {
                shop_no: '',
                // type 1优惠券 2红包
                type: 1,
                start_time: '',
                end_time: '',
                date: ''
            },
            statistics_data: {
                total_money: 0,
                total_used_money: 0
            },
            dateTimeRange: [],
            tableData: [],
        };
    },
    watch: {},
    computed: {},

    methods: {
        /**
         * 显示弹窗
         * @param queryData
         */
        show(queryData) {
            this.filterData = queryData;
            this.dialogVisible = true;
            this.getTableData();
        },

        /**
         * 请求列表数据
         */
        getTableData() {
            this.$post('/student/finance_control_shop%5Cget_shop_day_detail', {...this.filterData}, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.statistics_data.total_money = res.data.total_money;
                    this.statistics_data.total_used_money = res.data.total_used_money;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '/';
            return val;
        },

    }
};
</script>

<style scoped lang="less">
.wrapper {
    .dialog-content {
        max-height: 400px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 0;
        }
        /deep/ .el-table {
            border: 1px solid #eee;
            border-radius: 4px;

            th {
                background: #f2f2f2 !important;
            }

            td {
                background: #FBFBFB !important;
            }

            .el-table__row.cursor {
                cursor: pointer;
            }
        }

        .header {
            border-bottom: 1px solid #EEEEEE;
            margin-bottom: 24px;

            .title {
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                margin-bottom: 12px;
            }

            .time {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-bottom: 16px;
            }
        }
        .subsidy-money {
            margin-bottom: 16px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-dialog__body {
        padding: 24px 32px;
    }

    .dialog-footer {
        display: flex;
        justify-content: center;
    }
}
</style>
